<template>
    <!-- 下拉框组件 -->
    <div class="pane-group">
        <card-pane>
            <template v-slot:title>
                <span class="label">
                    <svg-icon
                        icon-class="font-layout-2-fill"
                        class="font-layout-2-fill"
                    />
                    <span class="text">下拉框组件</span>
                </span>
            </template>
            <template v-slot:list>
                <draggable
                    class="list-group"
                    :list="selectList"
                    :group="selectDraggable"
                    :sort="false"
                    :clone="hadnelCloneInput"
                >
                    <transition-group>
                        <div
                            class="component-item"
                            :class="selectDraggable.disabled ? 'disabled' : ''"
                            v-for="item in selectList"
                            :key="item.name"
                        >
                            <svg-icon
                                :icon-class="item.icon"
                                :class="item.icon"
                            />
                            <span class="label">
                                {{ item.name }}
                            </span>
                        </div>
                    </transition-group>
                </draggable>
            </template>
        </card-pane>
    </div>
</template>
<script>
import { getUuid } from '@/utils/tool'
import CardPane from '../base/components/cardPane'
export default {
    components: {
        CardPane
    },
    data() {
        return {
            // 选中的行
            activeRow: {},
            selectList: [
                {
                    type: 'select',
                    name: '基础下拉框',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'select',
                        disabled: false,
                        clearable: false,
                        placeholder: '请选择',
                        label: '',
                        prop: '',
                        width: 'w-1',
                        filterable: false,
                        allowCreate: false,
                        options: [
                            {
                                label: '选项一',
                                value: 1
                            },
                            {
                                label: '选项二',
                                value: 2
                            },
                            {
                                label: '选项三',
                                value: 3
                            }
                        ]
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                },
                {
                    type: 'select',
                    name: '多选下拉框',
                    icon: 'font-wubi-input',
                    value: {
                        ltype: 'select',
                        disabled: false,
                        clearable: false,
                        multiple: true,
                        placeholder: '请选择',
                        multipleLimit: 0,
                        collapseTags: true,
                        label: '',
                        prop: '',
                        width: 'w-1',
                        filterable: false,
                        allowCreate: false,
                        options: [
                            {
                                label: '选项一',
                                value: 1,
                                disabled: false
                            },
                            {
                                label: '选项二',
                                value: 2,
                                disabled: false
                            },
                            {
                                label: '选项三',
                                value: 3,
                                disabled: false
                            }
                        ]
                    },
                    rule: {
                        required: false,
                        message: ''
                    }
                }
            ],
            // 表单拖拽配置项
            selectDraggable: {
                name: 'formComponent',
                pull: false,
                put: false,
                disabled: true
            }
        }
    },
    mounted() {
        this.$bus.$on('ActiveView', row => {
            this.activeRow = row
            if (JSON.stringify(this.activeRow) !== '{}') {
                this.selectDraggable.pull = 'clone'
                this.selectDraggable.disabled = false
            } else {
                this.selectDraggable.pull = false
                this.selectDraggable.disabled = true
            }
        })
    },
    methods: {
        /**
         * 克隆表单容器开始
         */
        hadnelCloneInput(origin) {
            const data = JSON.parse(JSON.stringify(origin))
            data.id = getUuid()
            data.key = getUuid()
            data.pid = this.activeRow.id
            data.value.label = getUuid(4)
            data.value.prop = getUuid(4)
            return data
        }
    }
}
</script>
<style lang="scss" scoped>
@import './styles/base';
</style>
